@if (content) {
  <div class="view-list relative">
    <div class="flex flex-col" [ngClass]="content.fullWidth ? 'container-fluid' : 'container'">
      @if (content.text) {
        <app-text [attr.data-path]="'text'" [content]="content.text" />
      }
      @if (content.form) {
        <div class="filter flex flex-col md:flex-row justify-between items-center">
          <div class="filter-item flex flex-col md:flex-row flex-wrap gap-3">
            <app-dynamic-component
              [inputs]="{
                content: content.form,
                form: form,
                fields: content.form.fields,
                model: model,
              }"
            ></app-dynamic-component>
          </div>
          <div class="actions flex justify-center items-center gap-3">
            @if (content.params.export?.enable && content.params.export?.position === 'top') {
              <app-btn (click)="onExport()" [content]="content.params.export.btn" />
            }
            <button mat-button (click)="clear()"><mat-icon>clear</mat-icon>清空</button>
          </div>
        </div>
      }
      <mat-divider />
      <div class="view">
        @if (loading) {
          <ngx-skeleton-loader count="10" appearance="line" />
        }
        @if (table && canShow && !loading) {
          <app-dynamic-table [content]="table" />
        }
        <div class="actions m-y p-x flex justify-end items-center">
          @if (content.params.export?.enable && content.params.export?.position !== 'top') {
            <app-btn (click)="onExport()" [content]="content.params.export.btn" />
          }
        </div>
        @if (noAuth) {
          <div class="p-y p-x">您没有权限访问该页面！</div>
        }
        @if (pager) {
          <div class="pager">
            <mat-paginator
              class="demo-paginator"
              (page)="onPageChange($event)"
              [length]="pager.totalItems"
              [pageSize]="pager.itemsPerPage"
              [showFirstLastButtons]="true"
              [hidePageSize]="true"
              [pageIndex]="pager.currentPage"
              aria-label="Select page"
            />
          </div>
        }
      </div>
    </div>
  </div>
}
